<template>
  <section class="todoapp">
   <TaiTou @addList="addList"></TaiTou>

<!-- :list="renderList"  不懂 -->
   <BaDyst 
   :list="renderList" 
   @delList="delList"
   ></BaDyst>


   <FootJao 
  :sum="sum" 
   :showClearBtn="showClearBtn"
   @delAll="delAll"
   :type="type"
   @changeType="changeType"
   ></FootJao>


  </section>
</template>

<script>
import TaiTou from './components/TaiTou.vue'
import BaDyst from './components/BaDyst.vue'
import FootJao from './components/FootJao.vue'

export default {
  // 注册组件
  components: {
  TaiTou,
  BaDyst,
  FootJao
  },
  // 定义这个组件数据
  data() { 
    return {
      list: [
        {
          flag: true,
          id: 1,
          value:'读万卷书'
        },
        {
          flag: false,
          id: 2,
          value:'行万里路'
        }
      ],
      type: 'all'

     }
  },
  // 定义方法
  methods: {
    // 添加事件
    addList(value) { 
      this.list = [...this.list,{
        flag: false,
          id: +new Date(),
          value
      }]
    },

    // 删除事件
    delList(id) { 

this.list=this.list.filter((item)=>item.id!==id)
    },

    // 删除所有已完成的事件
    delAll() { 
    this.list=this.list.filter(item=>!item.flag)
    },

    // 修改change筛选类型
    changeType(value) { 
this.type=value
    }
  },

  // 计算属性
  computed: {
    // 计算未完成的总数
    sum() { 
      // item.flag是true，!item.flag是false未完成的
      return this.list.filter(item=>!item.flag).length
    },

    // 数据列表是否包含已完成的事件
    showClearBtn() { 
    // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
    // 如果没有满足条件的元素，则返回false。
return this.list.some((item)=>item.flag)
    },

  // 根据不同的type筛选类型去展示不同的数据
    renderList() {
      switch (this.type) {
        case "all":
          return this.list
          case "active":
          return this.list.filter(item=>!item.flag)
          case "completed":
          return this.list.filter(item=>item.flag)
        default:
          return this.list
       }
   }
  }
}
</script>

<style></style>
